import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import style from './index.less';
import { Alert, Tabs, Form, Input, message } from 'antd';
import { Descriptions } from 'antd';
import { Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import Project from './project';
import Member from './member';
import request from '@/http';
import { Link } from 'react-router-dom';
import { history } from '@/.umi/core/history';
import React, { useState } from 'react';
import { Drawer, Button } from 'antd';
import All_style from '../../index.less';

const { TabPane } = Tabs;
const fileList = [
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    thumbUrl:
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
];
const Personal = () => {
  const [uploadData, setUploadData] = React.useState();
  const [data, setData] = React.useState({
    className: '',
    collegesName: '',
    majorName: '',
    studentEmail: '',
    studentIdNo: '',
    studentMobileNo: '',
    studentName: '',
    studentNo: '',
    studentSex: '',
    teacherMobileNo: '',
    teacherName: '',
    yearName: '',
    key: 1,
  });
  const [jiamiStr, setJiamiStr] = useState('');
  const [jiamiStr2, setJiamiStr2] = useState('');
  const [jiamiStr3, setJiamiStr3] = useState('');
  const [jiamiStr4, setJiamiStr4] = useState('');
  const loadData = async () => {
    //用户个人信息信息
    const queryStudentPersonalInfo: any = await request.get(
      '/user/_s/queryStudentPersonalInfo',
    );
    if (queryStudentPersonalInfo.code == '200') {
      setData(queryStudentPersonalInfo.date);
      setJiamiStr(jiami(queryStudentPersonalInfo.date?.studentIdNo)); //学生身份证号码
      setJiamiStr2(jiami2(queryStudentPersonalInfo.date?.studentMobileNo)); //学生电话号码
      setJiamiStr3(jiami3(queryStudentPersonalInfo.date?.studentEmail)); //学生邮箱
      setJiamiStr4(jiami4(queryStudentPersonalInfo.date?.teacherMobileNo)); //老师电话号码
    }
  };
  /*加密显示代码 */
  const handleMouseOutInCard = (str: any, frontLen: any, endLen: any) => {
    var len = str.length - frontLen - endLen;
    var xing = '';
    for (var i = 0; i < len; i++) {
      xing += '*';
    }
    return (
      str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
    );
  };
  /*身份证加密显示 */
  const xianshi = () => {
    setJiamiStr(data.studentIdNo);
  };
  const jiami = (idCard: any) => {
    return handleMouseOutInCard(idCard, 3, 4);
  };

  /*个人电话加密显示 */
  const xianshi2 = () => {
    setJiamiStr2(data.studentMobileNo);
  };
  const jiami2 = (idCard2: any) => {
    return handleMouseOutInCard(idCard2, 3, 4);
  };

  /*邮箱加密显示 */
  const xianshi3 = () => {
    setJiamiStr3(data.studentEmail);
  };
  const jiami3 = (idCard3: any) => {
    return handleMouseOutInCard(idCard3, 3, 9);
  };

  /*班主任电话加密显示 */
  const xianshi4 = () => {
    setJiamiStr4(data.teacherMobileNo);
  };
  const jiami4 = (idCard4: any) => {
    return handleMouseOutInCard(idCard4, 3, 4);
  };

  React.useEffect(() => {
    loadData();
  }, []);

  const [visible, setVisible] = useState(false);
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };

  const [visible2, setVisible2] = useState(false);
  const showDrawer2 = () => {
    setVisible2(true);
  };
  const onClose2 = () => {
    setVisible2(false);
  };

  //修改邮箱
  const [formObject] = Form.useForm();
  const loadData2 = async () => {
    const datas = await formObject.validateFields();
    const result: any = await request.get('/user/_s/updateStudentEmail', {
      params: {
        studentEmail: datas.studentEmail,
      },
    });
    if (result.code == '200') {
      message.success('邮箱修改成功');
      window.history.back();
    } else {
      message.error(result.message);
    }
  };
  //修改电话号码
  const loadData3 = async () => {
    const datas = await formObject.validateFields();
    const result1: any = await request.get('/user/_s/updateStudentMobile', {
      params: { studentMobileNo: datas.studentMobileNo },
    });
    if (result1.code == '200') {
      message.success('电话修改成功');
      window.history.back();
    } else {
      message.error(result1.message);
    }
  };
  /**
   * 获得头像
   */
  const [Logo, setLogo] = React.useState([]);
  const getLogo = async () => {
    // const getlogo: any = await request.post('/information/student/getLogo'); //得到的文件名
    // setLogo(getlogo.data);
  };
  const token: any = window.localStorage.getItem('token'); //得到缓存token
  const logo = 'http://10.8.21.181:8087/logo/' + Logo; //拼接地址
  console.log(logo);
  //页面预加载
  React.useEffect(() => {
    // getLogo();
  }, []);

  return (
    <div className={style.box}>
      <div className={style.one}>
        <Avatar
          // shape="square"
          className={style.Avatar}
          size={250}
          icon={<UserOutlined />}
          src={logo}
        />
        {/* 上传头像 */}
        <Form name="Modify" form={formObject} preserve={false}>
          <Upload
            action="http://10.8.21.238:8082/user/_s/uploadFile"
            listType="picture"
            name={'file'}
            headers={{ Authorization: token }}
            onChange={(info) => {
              if (info.file.status === 'done') {
                setData({
                  ...data,
                });
              }
            }}
          >
            <Button icon={<UploadOutlined />} className={style.Button}>
              Upload
            </Button>
          </Upload>
        </Form>
        <Alert
          className={style.Alert}
          message="提示"
          description="为确保顺利通过人脸识别进行打卡，请上传你的正脸图片，请勿选择遮挡图、美颜图。"
          type="warning"
          showIcon
          closable
        />
        {/* <img src={data.studentLogo} /> */}
      </div>
      <div className={style.two}>
        <Descriptions title="个人信息">
          <Descriptions.Item label="姓名">{data.studentName}</Descriptions.Item>
          <Descriptions.Item label="学号">{data.studentNo}</Descriptions.Item>
          <Descriptions.Item label="身份证号">
            <span
              onMouseOver={xianshi}
              onMouseOut={() => {
                setJiamiStr(handleMouseOutInCard(data.studentIdNo, 3, 4));
              }}
            >
              {jiamiStr}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="性别">{data.studentSex}</Descriptions.Item>
          <Descriptions.Item label="邮箱地址">
            <span
              onMouseOver={xianshi3}
              onMouseOut={() => {
                setJiamiStr3(handleMouseOutInCard(data.studentEmail, 3, 9));
              }}
            >
              {jiamiStr3}
            </span>
            <Button type="link" onClick={showDrawer}>
              修改
            </Button>
            <Drawer
              title="修改邮箱"
              placement="top"
              closable={false}
              onClose={onClose}
              visible={visible}
            >
              <div style={{ clear: 'both', marginLeft: 500 }}>
                <Form
                  name="Modify"
                  form={formObject}
                  preserve={false}
                  initialValues={data}
                >
                  <Form.Item
                    name={'studentEmail'}
                    label="邮箱地址"
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '邮箱地址不能为空',
                      },
                    ]}
                  >
                    <Input
                      type="email"
                      placeholder="邮箱地址"
                      style={{ width: 400 }}
                    ></Input>
                  </Form.Item>

                  <div style={{ clear: 'both', marginLeft: 170 }}>
                    <Button
                      type={'primary'}
                      onClick={loadData2}
                      className={All_style.button}
                    >
                      确认修改
                    </Button>
                  </div>
                </Form>
              </div>
            </Drawer>
          </Descriptions.Item>
          <Descriptions.Item label="手机号码">
            <span
              onMouseOver={xianshi2}
              onMouseOut={() => {
                setJiamiStr2(handleMouseOutInCard(data.studentMobileNo, 3, 4));
              }}
            >
              {jiamiStr2}
            </span>
            <Button type="link" onClick={showDrawer2}>
              修改
            </Button>
            <Drawer
              title="修改电话"
              placement="top"
              closable={false}
              onClose={onClose2}
              visible={visible2}
            >
              <div style={{ clear: 'both', marginLeft: 500 }}>
                <Form
                  name="Modify"
                  form={formObject}
                  preserve={false}
                  initialValues={data}
                >
                  <Form.Item
                    name={'studentMobileNo'}
                    label="手机号码"
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '电话号码不能为空',
                      },
                    ]}
                  >
                    <Input
                      type="tel"
                      placeholder="请输入电话号码"
                      style={{ width: 400 }}
                    ></Input>
                  </Form.Item>

                  <div style={{ clear: 'both', marginLeft: 170 }}>
                    <Button
                      type={'primary'}
                      onClick={loadData3}
                      className={All_style.button}
                    >
                      确认修改
                    </Button>
                  </div>
                </Form>
              </div>
            </Drawer>
          </Descriptions.Item>
          <Descriptions.Item label="院系">
            {data.collegesName}
          </Descriptions.Item>
          <Descriptions.Item label="专业">{data.majorName}</Descriptions.Item>
          <Descriptions.Item label="年级">{data.yearName}</Descriptions.Item>

          <Descriptions.Item label="班级">{data.className}</Descriptions.Item>
          <Descriptions.Item label="班主任">
            {data.teacherName}
          </Descriptions.Item>
          <Descriptions.Item label="班主任电话">
            <span
              onMouseOver={xianshi4}
              onMouseOut={() => {
                setJiamiStr4(handleMouseOutInCard(data.teacherMobileNo, 3, 4));
              }}
            >
              {jiamiStr4}
            </span>
          </Descriptions.Item>
        </Descriptions>
        <Tabs defaultActiveKey="1" centered>
          <TabPane tab={<span>实训小组成员</span>} key="1">
            <Member />
          </TabPane>
          <TabPane tab={<span>项目得分</span>} key="2">
            <Project />
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

export default Personal;
